Sourced from esbuild's releases.

v0.19.9

• Add support for transforming new CSS gradient syntax for older browsers

  The specification called CSS Images Module Level 4 introduces new CSS gradient syntax for customizing how the browser interpolates colors in between color stops. You can now control the color space that the interpolation happens in as well as (for "polar" color spaces) control whether hue angle interpolation happens clockwise or counterclockwise. You can read more about this in Mozilla's blog post about new CSS gradient features.

  With this release, esbuild will now automatically transform this syntax for older browsers in the target list. For example, here's a gradient that should appear as a rainbow in a browser that supports this new syntax:

  /* Original code */
  .rainbow-gradient {
    width: 100px;
    height: 100px;
    background: linear-gradient(in hsl longer hue, #7ff, #77f);
  }
  /* New output (with --target=chrome99) */
  .rainbow-gradient {
  width: 100px;
  height: 100px;
  background:
  linear-gradient(
  #77ffff,
  #77ffaa 12.5%,
  #77ff80 18.75%,
  #84ff77 21.88%,
  #99ff77 25%,
  #eeff77 37.5%,
  #fffb77 40.62%,
  #ffe577 43.75%,
  #ffbb77 50%,
  #ff9077 56.25%,
  #ff7b77 59.38%,
  #ff7788 62.5%,
  #ff77dd 75%,
  #ff77f2 78.12%,
  #f777ff 81.25%,
  #cc77ff 87.5%,
  #7777ff);
  }

  You can now use this syntax in your CSS source code and esbuild will automatically convert it to an equivalent gradient for older browsers. In addition, esbuild will now also transform "double position" and "transition hint" syntax for older browsers as appropriate:

  /* Original code */
  .stripes {
    width: 100px;
    height: 100px;
    background: linear-gradient(#e65 33%, #ff2 33% 67%, #99e 67%);
  }

... (truncated)

Sourced from esbuild's changelog.

0.19.9

• Add support for transforming new CSS gradient syntax for older browsers

  The specification called CSS Images Module Level 4 introduces new CSS gradient syntax for customizing how the browser interpolates colors in between color stops. You can now control the color space that the interpolation happens in as well as (for "polar" color spaces) control whether hue angle interpolation happens clockwise or counterclockwise. You can read more about this in Mozilla's blog post about new CSS gradient features.

  With this release, esbuild will now automatically transform this syntax for older browsers in the target list. For example, here's a gradient that should appear as a rainbow in a browser that supports this new syntax:

  /* Original code */
  .rainbow-gradient {
    width: 100px;
    height: 100px;
    background: linear-gradient(in hsl longer hue, #7ff, #77f);
  }
  /* New output (with --target=chrome99) */
  .rainbow-gradient {
  width: 100px;
  height: 100px;
  background:
  linear-gradient(
  #77ffff,
  #77ffaa 12.5%,
  #77ff80 18.75%,
  #84ff77 21.88%,
  #99ff77 25%,
  #eeff77 37.5%,
  #fffb77 40.62%,
  #ffe577 43.75%,
  #ffbb77 50%,
  #ff9077 56.25%,
  #ff7b77 59.38%,
  #ff7788 62.5%,
  #ff77dd 75%,
  #ff77f2 78.12%,
  #f777ff 81.25%,
  #cc77ff 87.5%,
  #7777ff);
  }

  You can now use this syntax in your CSS source code and esbuild will automatically convert it to an equivalent gradient for older browsers. In addition, esbuild will now also transform "double position" and "transition hint" syntax for older browsers as appropriate:

  /* Original code */
  .stripes {
    width: 100px;
    height: 100px;
    background: linear-gradient(#e65 33%, #ff2 33% 67%, #99e 67%);

... (truncated)

• 9edc9d4 publish 0.19.9 to npm
• 791619e release notes: link to gradient tests
• 83b4171 css: implement lowering of gradient syntax
• 4a3b265 css: fix calc() inlining whitespace bug
• 90989ec remove a stray log statement
• f260285 css gradients: handle color transition hints
• e4c55af css gradients: lower colors, fix double positions
• a389c52 css: add lab() + lch() + oklab() + oklch()
• b837f21 css: avoid overwriting manual fallback colors
• 824ede6 css: simplify color() duplication fallback logic
• Additional commits viewable in compare view

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)